<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul id="postList">
            <!--  <li><div><img src="images/tou04.jpg"></div><h1>333</h1><p><span>版块：电子书籍</span><span>发表时间：2020-11-5 12:6</span></p></li> -->
            </ul>
    </section>
    <div class="post" id="post">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title">所属版块：
        <select id="qqq">
            <option value="-1">请选择版块</option>
            <option value="0">电子书籍</option>
            <option value="1">新课来了</option>
            <option value="2">新手报到</option>
            <option value="3">职业规划</option>
        </select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script>
    var name = ['张三','李四','王五','赵六'];
    var tou = ['tou01.jpg','tou02.jpg','tou03.jpg','tou04.jpg'];
    var index = Math.floor(Math.random()* tou.length);

    $('header span').on('click',function(){
        $('#post').css('display','block');
    })

    $('.btn').on('click',function(){
        var date=Date();
        var title= $('.title').val();
        var con = $('#content').text();
        var sec = $('#qqq option:selected').text();
        
        var html=`<li><div><img src="images/${tou[index]}"></div>
                   <h1>${title}</h1><p>${con}</p>
                     <p><span>版块：${sec}</span><span>发表时间：${date}</span></p></li>`
        $('#postList').prepend(html);
        $('#post').css('display','none');
        $('.title').val('');
        $('#content').text('');
        $('#sec').val(-1);   
    })
</script>
</body>
</html>